<template>
  <el-form label-width="auto" class="demo-ruleForm" style="margin-top: 20px">
    <el-form-item label="上报单位:">
      <el-select v-model="ruleForm.reportUnitIds" multiple placeholder="请选择">
        <el-option
          v-for="item in depts"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="上报人:">
      <el-select v-model="ruleForm.reportIds" multiple placeholder="请选择">
        <el-option
          v-for="item in users"
          :key="item.id"
          :label="item.nickname"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script setup>
  import { getAllUser } from '@/api/system/user'
  import { getDeptPage } from '@/api/system/dept/index'

  const $baseMessage = inject('$baseMessage')

  const ruleForm = reactive({
    reportIds: [],
    reportUnitIds: [],
  })

  const users = ref([])
  const depts = ref([])

  const getUserList = () => {
    getAllUser().then((res) => {
      if (res.code == 0 || res.code == 200) {
        users.value = res.data || []
      }
    })
  }

  const getDepts = () => {
    getDeptPage().then((res) => {
      if (res.code == 0 || res.code == 200) {
        depts.value = res.data || []
      }
    })
  }

  const getFormData = () => {
    for (const key in ruleForm) {
      if (!ruleForm[key] || !ruleForm[key].length) {
        $baseMessage('请填写上报信息', 'error')
        return false
      }
    }
    return ruleForm
  }

  const setFormData = (data) => {
    ruleForm.reportIds = data.reporterIds
    ruleForm.reportUnitIds = data.reportUnitIds
  }

  defineExpose({ getFormData, setFormData })

  getUserList()
  getDepts()
</script>

<style lang="scss" scoped></style>
